@use "../variables.scss";

.u-color--primary {
  background-color: var(--primary-color);
}
.u-color--secondary {
  background-color: variables.$sub-nav-color;
}
.u-color--accent {
  background-color: var(--primary-color);
}
.u-color--error {
  background-color: var(--error-color);
}
.u-color--success {
  background-color: var(--success-color);
}
.u-color--warning {
  background-color: var(--warning-color);
}
.u-color--bodyCopy {
  background-color: variables.$text-color-body-copy;
}
.u-color--taupe {
  background-color: variables.$light-taupe;
}

.u-textColor--primary {
  color: variables.$text-color-primary;
}
.u-textColor--secondary {
  color: variables.$text-color-secondary;
}
.u-textColor--header {
  color: variables.$text-color-header;
}
.u-textColor--bodyCopy {
  color: variables.$text-color-body-copy;
}
.u-textColor--info {
  color: variables.$text-color-info;
}
.u-textColor--accent {
  color: variables.$text-color-accent;
}
.u-textColor--mutedAccent {
  color: variables.$muted-light-accent;
}
.u-textColor--error {
  color: var(--error-color);
}
.u-textColor--success {
  color: var(--success-color);
}
.u-textColor--warning {
  color: var(--warning-color);
}
.u-linkColor {
  color: var(--link-color);
  &:hover {
    color: var(--link-hover-color);
  }
}

.u-color--white {
  color: #ffffff;
}
.u-backgroundColor--white {
  background-color: #ffffff;
}
.u-color--mutedteal {
  color: #577981;
}
.u-color--lightteal {
  color: #e1f0f1;
}

.help-text-color {
  color: variables.$text-color-body-copy;
}
